import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootAction, RootState } from '@/types/store'
import { differenceBy } from 'lodash'
import { addChannel, delChannel } from '@/store/actions/home'
import { useState } from 'react'
import { Toast } from 'antd-mobile'

// const bigList = [
//   { id: 1, name: '张三' },
//   { id: 2, name: '王五' },
//   { id: 3, name: '李四' },
// ]

// const smallList = [{ id: 2, name: '王五' }]

// const res = differenceBy(bigList, smallList, 'id')
// console.log(res)

type PropsType = {
  close: () => void
}

const Channels = ({ close }: PropsType) => {
  // 用户频道
  const userChannels = useSelector(
    (state: RootState) => state.home.userChannels
  )

  const dispatch = useDispatch()

  // 所有频道
  const allChannels = useSelector((state: RootState) => state.home.allChannels)

  // 根据所有频道 用户频道  得到推荐频道
  // const recomChannels = allChannels.filter((item) => {
  //   // 返回true 表示item要留下来  反之要去掉
  //   // 拿着item.id 去userChannels找  找不到的留下来!!
  //   // 找不到 index 为 -1
  //   const index = userChannels.findIndex((v) => v.id === item.id)
  //   return index === -1
  // })

  const recomChannels = differenceBy(allChannels, userChannels, 'id')

  const active = useSelector((state: RootState) => state.home.active)

  const [edit, setEdit] = useState(false)

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon name="iconbtn_channel_close" onClick={close} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div
          className={classnames('channel-item', {
            edit: edit,
          })}
        >
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {edit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span className="channel-item-edit" onClick={() => setEdit(!edit)}>
              {edit ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannels.map((item) => {
              return (
                <span
                  onClick={() => {
                    // 编辑状态下 什么都不做
                    if (edit) return
                    // 激活频道的id 存仓库
                    dispatch({
                      type: 'home/set_active',
                      payload: item.id,
                    } as RootAction)

                    // 关闭弹层
                    close()
                  }}
                  className={classnames('channel-list-item', {
                    selected: item.id === active,
                  })}
                  key={item.id}
                >
                  {item.name}
                  <Icon
                    name="iconbtn_tag_close"
                    onClick={() => {
                      if (edit) {
                        // 判断如果少于4个 不让删
                        if (userChannels.length <= 4) {
                          Toast.show('至少保留4个频道')
                          return
                        }

                        // 发请求删除频道
                        // console.log(item.id)
                        dispatch(delChannel(item.id))

                        if (item.id === active) {
                          // 删除了高亮项
                          dispatch({
                            type: 'home/set_active',
                            payload: userChannels[0].id,
                          } as RootAction)
                        }
                      }
                    }}
                  />
                </span>
              )
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recomChannels.map((item) => {
              return (
                <span
                  onClick={() => {
                    dispatch(addChannel(item))
                  }}
                  className="channel-list-item"
                  key={item.id}
                >
                  + {item.name}
                </span>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
